import 'package:flutter/material.dart';
import 'package:kxy_flutter_app/r.dart';
import 'package:kxy_flutter_app/view/my/integral/integral_rank_list_widget.dart';
import 'package:kxy_flutter_app/view/my/integral/integral_rank_model.dart';
import 'package:kxy_flutter_app/view/my/integral/my_integral_rank_widget.dart';
import 'package:provider/provider.dart';

class IntegralView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return IntegralViewState();
  }
}

class IntegralViewState extends State<IntegralView> with TickerProviderStateMixin {
  TabController controller;
  IntegralRankModel rankModel;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (rankModel == null) {
      rankModel = Provider.of<IntegralRankModel>(context, listen: false);
      rankModel.init();

      controller = new TabController(
        length: rankModel.rankNames.length,
        vsync: this,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return backgroundWidget(Scaffold(
      appBar: appbar(),
      backgroundColor: Colors.transparent,
      body: body(),
    ));
  }

  Widget appbar() {
    return AppBar(
      title: Text('积分排行', style: TextStyle(color: Colors.white)),
      backgroundColor: Colors.transparent,
      elevation: 0,
      centerTitle: true,
      leading: IconButton(
        icon: Icon(Icons.arrow_back, color: Colors.white),
        onPressed: () => Navigator.pop(context),
      ),
      actions: [typeSelect()],
    );
  }

  Widget body() {
    return Column(
      children: [
        MyIntegralRankWidget(),
        tabbar(),
        Expanded(child: tabbarViews()),
      ],
    );
  }

  TabBarView tabbarViews() {
    return TabBarView(
      controller: controller,
      children: rankModel.rankNames.map((name) {
        return IntegralRankListWidget(rankName: name);
      }).toList(),
    );
  }

  Widget tabbar() {
    return PreferredSize(
      preferredSize: Size(MediaQuery.of(context).size.width, 42),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              color: Colors.black12,
              width: 0.5,
            ),
          ),
        ),
        alignment: Alignment.centerLeft,
        child: TabBar(
          tabs: rankModel.rankNames.map((e) => Text(e)).toList(),
          controller: controller,
          labelPadding: EdgeInsets.fromLTRB(15, 15, 15, 10),
          unselectedLabelColor: Colors.black54,
          unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal, fontSize: 16),
          labelColor: Theme.of(context).primaryColor,
          labelStyle: TextStyle(fontWeight: FontWeight.normal, fontSize: 16),
          indicatorSize: TabBarIndicatorSize.label,
          indicatorColor: Theme.of(context).primaryColor,
        ),
      ),
    );
  }

  Widget typeSelect() {
    return Consumer<IntegralRankModel>(
      builder: (cxt, vm, child) {
        return FlatButton(
          child: Text(vm.rankTypeName),
          textColor: Colors.white,
          onPressed: () => vm.changeRankType(),
        );
      },
    );
  }

  Widget backgroundWidget(Widget child) {
    var img = DecorationImage(
      image: AssetImage(R.assetsCommonBg),
      fit: BoxFit.fill,
      alignment: Alignment.topCenter,
    );

    var shadow = BoxShadow(
      color: Color.fromRGBO(0, 0, 0, 0.5),
      blurRadius: 5,
      offset: Offset(0, 1),
    );

    return Container(
      decoration: BoxDecoration(color: Colors.white),
      child: Stack(
        children: [
          Container(
            height: 90 + kToolbarHeight + MediaQuery.of(context).padding.top,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [shadow],
              image: img,
            ),
          ),
          child,
        ],
      ),
    );
  }
}
